<template>
  <div class="search_firm" v-if="Object.keys(firmData).length !== 0">
    <search-nav-bar></search-nav-bar>
    <condition :conditions="conditions"></condition>
    <div class="resultCounter">
      为你搜索到<span>{{firmData.result}}</span>条结果
    </div>
    <search-result>
      <firm slot="result" :firm="firmData.data"></firm>
      <hot-list slot="hot" :hot-list="hotList"></hot-list>
    </search-result>
  </div>
</template>

<script>
  import SearchNavBar from "../searchNavBar/SearchNavBar";
  import Condition from "../condition/Condition";
  import SearchResult from "../searchResult/SearchResult";
  import Firm from "./firm/Firm";
  import HotList from "../hotList/HotList";

  import {timeFormat} from "common/Utils";
  import {getCompanyList, getCompanyListWithQuery} from "network/search";

  export default {
    name: "SearchFirm",
    components: {
      SearchNavBar,
      Condition,
      SearchResult,
      Firm,
      HotList
    },
    data() {
      return {
        conditions: [
          {
            title: '城市',
            conditions: ["全国", "北京", "上海", "广州", "深圳", "杭州", "天津", "成都", "武汉", "重庆", "吉林", "西安", "长沙",],
            isShowInput: true
          },
          {
            title: '时间',
            conditions: ["全部", "最近一天", "最近一周", "最近一月", "最近一年", "两年内"],
            isShowInput: false
          },
          {
            title: '已选',
            conditions: {
              city: '',
              time: ''
            },
            isShowInput: false,
          }
        ],
        hotList: [
          {
            rank: 1,
            content: '字节跳动'
          },
          {
            rank: 2,
            content: '百度'
          },
          {
            rank: 3,
            content: '腾讯'
          },
          {
            rank: 4,
            content: '字节跳动'
          },
          {
            rank: 5,
            content: '百度'
          },
          {
            rank: 6,
            content: '腾讯'
          },
          {
            rank: 7,
            content: '字节跳动'
          },
          {
            rank: 8,
            content: '百度'
          },
          {
            rank: 9,
            content: '腾讯'
          },
        ],
        firmData: {
          result: '',
          data: [],
        },
        conditionClick: null,
        search: null,
        city: '',
        time: '',
      }
    },
    watch: {
      city() {
        this.conditions[this.conditions.length - 1].conditions.city = this.city
      },
      time() {
        this.conditions[this.conditions.length - 1].conditions.time = this.time
      },
    },
    created() {
      getCompanyList().then(res => {
        if (res.data.code) {
          this.firmData.data = res.data.data
          this.firmData.result = res.data.data.length
        }
      })
    },
    mounted() {
      this.conditionClick = (condition) => {
        if (condition.title == "城市") {
          this.city = condition.conditionSelect
          getCompanyListWithQuery && getCompanyListWithQuery(this.city, this.time).then(res => {
            console.log(res)
            if (res.data.code) {
              this.firmData.data = res.data.data.list
              this.firmData.result = res.data.data.list.length
            }
          })
        } else if (condition.title == "时间") {
          this.time = timeFormat(condition.conditionSelect)
          getCompanyListWithQuery && getCompanyListWithQuery(this.city, this.time).then(res => {
            if (res.data.code) {
              this.firmData.data = res.data.data.list
              this.firmData.result = res.data.data.list.length
            }
          })
        }
      }
      this.$bus.$on('conditionClick', this.conditionClick)

      this.search = (search) => {
        getCompanyListWithQuery('', '', search).then(res => {
          if(res.data.code) {
            this.firmData.data = res.data.data.list
            this.firmData.result = res.data.data.list.length
          }
        })
      }
      this.$bus.$on('search', this.search)
    },
    beforeDestroy() {
      this.$bus.$off('conditionClick', this.conditionClick)
      this.$bus.$off('search', this.search)
    },
  }
</script>

<style scoped>
  .search_firm {
    width: 1100px;
    margin: 0 auto;
    overflow: hidden;
  }

  .resultCounter {
    height: 50px;
    margin: 10px 0;
    padding-left: 20px;
    background-color: #fff;
    border-radius: 10px;
    line-height: 50px;
    color: #8F9395;
    font-size: 14px;
  }

  .resultCounter span {
    margin: 0 2px;
    color: #4361a7;
  }
</style>
